<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="showDialog"
    :title="title"
    :destroy-on-close="true"
    @close="onCloseDialog"
    width="60%"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="essentialInfo">
        <el-form
          :model="formTerminalDepositLotteryData"
          :rules="rulesTerminalDepositLottery"
          ref="formTerminalDepositLotteryData"
          label-width="140px"
        >
          <el-form-item label="设备名称">
            <el-input
              v-model="formTerminalDepositLotteryData.deviceName"
              placeholder="设备名称"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formTerminalDepositLotteryData.deviceTypeId"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.id"
                :label="item.deviceTypeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动更新">
            <el-switch v-model="isUpgrade" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>
        </el-form>

        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="deviceDepositLotteryInfoUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="参数配置" name="parameterconfiguration">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminalDepositLottery"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="后台密码">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.backstageDefaultPwd"
              placeholder="后台密码（默认：123456）"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="打印机型号">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerModel"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('RECEIPT_PRINTER_MODEL')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="打印机接口">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerInterfaceType"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('PRINTER_INTERFACE_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="打印机SN">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerSN"
              placeholder="打印机SN"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="打印机地址">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerAddress"
              placeholder="打印机地址"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="打印机串口">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerSerialPort"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="打印页眉">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerHead"
              placeholder="打印页眉"
              clearable
              size="small"
            />
          </el-form-item>

          <el-form-item label="打印页脚">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.printerFooter"
              placeholder="打印页脚"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="操作倒计时">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.operateTime"
              placeholder="操作倒计时"
              clearable
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="存储比例">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.storageRatio"
              placeholder="存储比例"
              clearable
              inputmode="decimal"
              size="small"
            />
          </el-form-item>

          <el-form-item label="凭据有效期(天)">
            <el-input
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.fitReceiptValidityPeriod"
              placeholder="凭据有效期"
              clearable
              inputmode="numeric"
              size="small"
            />
          </el-form-item>

          <br />
          <el-form-item label="控制板串口">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.controlBoardSerialPort"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="控制板类型">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.controlBoardType"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('DL_CONTROL_BOARD_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <br />
          <el-form-item label="读卡器串口">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.serialPortOfCardReader"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('COM_LIST')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="读卡器类型">
            <el-select
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.serialTypeOfCardReader"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="dict in formatDictMap('CARD_READER_TYPE')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="功能开关" name="functionSwitch">
        <el-form
          :model="formTerminalData"
          :rules="rulesTerminalDepositLottery"
          ref="formTerminalData"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="会员存票">
            <el-switch
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.isMemberDepositLottery"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="散客存票">
            <el-switch
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.isFitDepositLottery"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <br />
          <el-form-item label="操作明细">
            <el-switch
              v-model="formTerminalData.sysDeviceDepositLotteryOtherSetVO.isOperationDetails"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-form>
        <el-row style="text-align: center">
          <span class="dialog-footer">
            <el-button @click="onCloseDialog">取 消</el-button>
            <el-button type="primary" @click="configureUpdate">确 定</el-button>
          </span>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deviceAction } from '@/api/device/device.js';
  import { deviceTypeList } from '@/api/device/type.js';
  import { ElMessage } from 'element-plus';
  import { getDictOptions } from '@/utils/dict';

  export default {
    name: 'DialogDepositLotteryTerminal',
    dicts: [
      'SYS_PAY_SORT',
      'SCAN_TYPE',
      'SHOW_TYPE',
      'COM_LIST',
      'DL_CONTROL_BOARD_TYPE',
      'CARD_READER_TYPE',
      'BANKNOTE_MACHINE_TYPE',
      'COIN_TYPE',
      'MOTOR_WORK_MODE',
      'RECEIPT_PRINTER_MODEL',
    ],
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '终端设置',
      },
      deviceId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        activeName: 'essentialInfo',
        //        showDialog: false,
        isUpgrade: true,
        isStatus: true,
        formTerminalDepositLotteryData: {},
        formTerminalData: {
          sysDeviceDepositLotteryOtherSetVO: {},
        },
        deviceTypeList: [],
        rulesTerminalDepositLottery: {
          deviceName: [{ required: true, message: '设备名称不可为空！', trigger: 'blur' }],
        },
        form: {},
      };
    },
    computed: {
      showDialog() {
        return this.dialog;
      },
    },
    watch: {},
    created() {
      this.getDeviceDepositLotteryDetails();
      //设备类型列表
      deviceTypeList({}).then((res) => {
        this.deviceTypeList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      //终端设置
      getDeviceDepositLotteryDetails() {
        deviceAction('DEPOSIT_LOTTERY', 'getDeviceDepositLotteryDetails', this.deviceId).then(
          (response) => {
            this.formTerminalData = response;
            this.formTerminalDepositLotteryData = response;
            if (this.formTerminalDepositLotteryData.isStatus == 1) {
              this.isStatus = false;
            }
            if (this.formTerminalDepositLotteryData.isUpgrade == 0) {
              this.isUpgrade = false;
            }
          },
        );
      },
      //设备信息修改
      deviceDepositLotteryInfoUpdate() {
        this.formTerminalDepositLotteryData.isStatus = this.isStatus == true ? 0 : 1;
        this.formTerminalDepositLotteryData.isUpgrade = this.isUpgrade == true ? 1 : 0;
        deviceAction('DEVICE', 'updateDevice', this.formTerminalDepositLotteryData).then(
          (response) => {
            if (response) {
              ElMessage({
                message: '操作成功！',
                type: 'success',
              });
              this.$emit('submit');
            } else {
              ElMessage({
                message: response.msg,
                type: 'error',
              });
            }
          },
        );
      },
      //参数修改
      configureUpdate() {
        deviceAction(
          'DEPOSIT_LOTTERY',
          'getDeviceDepositLotterySetOtherInfoUpdate',
          this.formTerminalData,
        ).then((response) => {
          if (response) {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            });
            this.$emit('submit');
          } else {
            ElMessage({
              message: response.msg,
              type: 'error',
            });
          }
        });
      },
      onCloseDialog() {
        this.$emit('close');
      },
    },
  };
</script>

<style scoped></style>
